<template>
	<view class="page">
		<view>
			<wd-navbar title="" fixed placeholder left-arrow safeAreaInsetTop custom-class="nav" :bordered="false" @click-left="handleClickLeft"></wd-navbar>
			<view class="content_box">
				<wd-img :src="userInfo?.imgurl || '/static/assets/my/tx.png'" width="71" height="71" round></wd-img>
				<wd-gap height="30rpx"></wd-gap>
				<wd-text :text="userInfo?.username" color="#333"></wd-text>
				<wd-gap height="20rpx"></wd-gap>
				<view class="tag_box d-flex-center" v-if="userInfo?.vip">
					<wd-img
					  width="15"
					  height="15"
					  src="/static/assets/my/jiangzhang.png"
					></wd-img>
					<wd-text text="VIP用户" size="12px" color="#FF9C00"></wd-text>
				</view>
				<wd-gap height="80rpx"></wd-gap>
				<view @click="loginout">
					<wd-img src="/static/assets/my/logout.png" width="269" height="44"></wd-img>
				</view>
			</view>
		</view>
		<view>
			<view class="d-flex-center">
				<wd-text @click="destroyAcount" size="14px" color="#999" text="注销账号"></wd-text>
			</view>
			<wd-gap safeAreaBottom></wd-gap>
		</view>
	</view>
</template>

<script setup>
import { toRouter, toSwich } from "@/hooks/utils";
import { ref, computed } from 'vue';
import store from '../../store';

const userInfo = computed(()=>{
	return store.state.value.userInfo
})
const tab = ref(0)
const v1 = ref(null)
const v2 = ref(null)
const handleClickLeft = function handleClickLeft() {
  uni.navigateBack()
}
const handleClick = ()=> {
}
const loginout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				store.state.value.userInfo = null
				uni.removeStorageSync('wpa_username')
				toSwich('/pages/my/index')
			}
		}
	})
	
}
const destroyAcount = () => {
	uni.showModal({
		title: '提示',
		content: '确定要注销该账号，您的记录将会被永久删除？',
		success: (res) => {
			if (res.confirm) {
				uni.request({
					url: '/api/wallpaper/user/logoff',
					method: 'POST',
					data: {
						username: uni.getStorageSync('wpa_username')
					},
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					}
				})
				store.state.value.userInfo = null
				uni.removeStorageSync('wpa_username')
				toSwich('/pages/my/index')
			}
		}
	})
}
</script>

<style lang="scss" scoped>
:deep() {
	.nav {
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100% auto;
	}
}
.page {
	position: relative;
	display: flex;
	flex-flow: column;
	height: 100vh;
	justify-content: space-between;
	&:before {
		content: '';
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100%;
		z-index: -1;
	}
}
.content_box {
	padding: 80rpx 45rpx;
	display: flex;
	align-items: center;
	flex-flow: column;
}
.tag_box {
	background: #EFEFEF;
	border-radius: 8rpx;
	padding: 10rpx;
	:deep(){
		.wd-img {
			margin-right: 10rpx;
		}
	}
}
</style>
